<template>
  <div class="common-top-control">
    <div class="common-top-control__title-wrapper">
      <a-typography-title :level="4" class="common-top-control__title-text">
        {{ titleText }}
      </a-typography-title>
      <a-space align="start">
        <slot name="titleOptions"></slot>
      </a-space>
    </div>
    <a-space>
      <slot></slot>
    </a-space>
  </div>
</template>

<script setup lang="ts">
withDefaults(defineProps<{ titleText?: string }>(), {
  titleText: '某某列表',
})
</script>

<style lang="scss" scoped>
@include b(common-top-control) {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid $border-color-base;
  @include e(title-wrapper) {
    display: flex;
  }
  @include e(title-text) {
    margin-right: 26px;
  }
}
</style>
